<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="审批人">
                <el-input v-model="formInline.user" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="活动区域">
                <el-select v-model="formInline.region" placeholder="活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="roleId" label="角色ID" width="180">
            </el-table-column>
            <el-table-column prop="roleName" label="角色名称" width="180">
            </el-table-column>
            <el-table-column prop="createTime" :formatter="formatter" label="时间">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="Error" size="mini" @click="permission(scope.$index, scope.row)">分配权限</el-button>
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="分配权限" :visible.sync="dialogPermissionVisible">
            <assign-permission ref="assignPermission" :roleId="roleId" @OnSave="SaveData"></assign-permission>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogPermissionVisible = false">取 消</el-button>
                <el-button type="primary" @click="Save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import axios from '../../util/request';
    import AssignPermission from './AssignPermission';
    import moment from 'moment'
    export default {
        components: {
            AssignPermission
        },
        data() {
            return {
                roleIds: [],
                tableData: [],
                formInline: {
                    user: '',
                    region: ''
                },
                roleId: 0,
                dialogPermissionVisible: false
            }
        },
        mounted() {
            this.LoadData();
        },
        methods: {
            LoadData() {
                axios.get("/Role/QueryAll").then(m => {
                    this.tableData = m.data.data;
                });
            },
            SaveData() {
                this.dialogTableVisible = false;
                this.dialogTableVisible_Edit = false;
                this.LoadData();
            },
            handleEdit(index, row) {
                this.dialogTableVisible_Edit = true;
                this.adminId = row.adminId;
            },
            formatter(row, column, cellValue, index) {
                return moment(cellValue).lang('zh-cn').format('YYYY-MM-DD HH:mm:ss Q dddd');
            },
            handleDelete(index, row) {
                axios.get('/admin/delete?id=' + row.adminId).then(m => {
                    this.LoadData();
                });
            },
            handleSelectionChange(val) {
                this.adminIds = val;
                console.log(this.adminIds);
            },
            BulkDelete() {
                axios.post('/admin/bulkdelete', this.adminIds.map(m => m.adminId)).then(m => {

                });
            },
            Save() {
                this.$refs.assignPermission.SavePermission();
            },
            permission(index, row) {
                this.dialogPermissionVisible = true;
                this.$nextTick(function () {
                    this.$refs.assignPermission.EditPermission(row.roleId);
                });
            }
        },
    }
</script>